<template>
  <van-nav-bar title="首页" fixed />
  <div style="height: 45px"></div>
  <van-tabs v-model:active="active" animated>
    <van-tab title="京东超市">
      <van-search
        shape="round"
        placeholder="请输入搜索关键词"
        @search="
          () => {
            $router.push('/search');
          }
        "
      />
      <Swiper></Swiper>
      <van-grid>
        <van-grid-item
          v-for="(catitemsItem, catitemsIndex) in catitemsData"
          :icon="catitemsItem.image_src"
          :text="catitemsItem.name"
          :key="catitemsIndex"
        />
      </van-grid>
      <div v-for="(floorItem, floorIndex) in floordata" :key="floorIndex">
        <img
          :src="floorItem.floor_title.image_src"
          alt=""
          style="width: 100%; margin-top: 5px"
        />
        <div
          v-for="(productItem, productIndex) in floorItem.product_list"
          :key="productIndex"
        >
          <img
            :src="productItem.image_src"
            alt=""
            style="width: 120px; height: 120px; float: left; margin: 2px"
          />
        </div>
      </div>
    </van-tab>
    <van-tab title="京东外卖">2</van-tab>
    <van-tab title="京东快递">3</van-tab>
    <van-tab title="京东秒杀">4</van-tab>
    <van-tab title="京东频道">5</van-tab>
    <van-tab title="京东超市">6</van-tab>
    <van-tab title="京东优惠">7</van-tab>
  </van-tabs>
</template>

<script setup>
import { ref } from "vue";
import { getCatitems, getFloordata } from "@/api/api.js";
import Swiper from "@/components/Swiper.vue";
const active = ref("");

const catitemsData = ref([]);
getCatitems().then((res) => {
  console.log("res: ", res);
  catitemsData.value = res.data.message;
});
const floordata = ref([]);
getFloordata().then((res) => {
  console.log("res: ", res);
  floordata.value = res.data.message;
});
</script>

<style></style>
